<template>
  <el-card>
    <section>
      <div class="row"
           v-for="item in list"
           :key="item.index">
        <div class="title">
          <span class="districtName">{{item.cadres[0].name}}村书记</span>
          <span class="line"></span>
          <span>{{item.cadres[0].districtName}}</span>
        </div>
        <div class="content">
          <span class="current">当前职级：{{item.currentLevel}}</span>
          <span class="event-item1">{{item.event[0]}}+1</span>
          <i class="el-icon-right"></i>
          <span class="event-item2">{{item.event[2]}}+1</span>
          <span>预判职级：{{item.cadres[0].predictive}}</span>
        </div>
      </div>
    </section>
  </el-card>
</template>
<script>
export default {
  name: 'PrognosisAnalyze',
  data () {
    return {
      list: [{
        currentLevel: '一级',
        event: ['担任村书记时长', '能力研判', '上年度专职村书记考核等次 '],
        cadres: [{
          name: '张三1',
          districtName: '张三1村',
          predictive: '二级'
        },{
          name: '李四',
          districtName: '李1村',
          predictive: '二级'
        }]
      }, {
        currentLevel: '二级',
        event: ['担任村书记时长', '能力研判', '上年度专职村书记考核等次 '],
        cadres: [{
          name: '张三2',
          districtName: '张三2村',
          predictive: '三级'
        }]
      }, {
        currentLevel: '三级',
        event: ['担任村书记时长', '能力研判', '上年度专职村书记考核等次 '],
        cadres: [{
          name: '张三3',
          districtName: '张三3村',
          predictive: '四级'
        }]
      }, {
        currentLevel: '四级',
        event: ['担任村书记时长', '能力研判', '上年度专职村书记考核等次 '],
        cadres: [{
          name: '张三4',
          districtName: '张三4村',
          predictive: '五级'
        }]
      },]
    }
  },
  methods: {

  },
  created () {

  }
}
</script>
<style lang="less" scoped>
.title {
  width: 100%;
  height: 50px;
  border: 1px solid #000;
  text-align: left;
  line-height: 50px;
  // .name {
  //   float: left;
  //   margin-left: 10px;
  // }
  // .districtName {
  //   margin-left: 50px;
  // }
  .line {
    margin: 0 20px;
    display: inline-block;
    width: 50px;
    height: 1px;
    background-color: #000;
  }
}
.content {
  position: relative;
  width: 100%;
  height: 150px;
  border: 1px solid #000;
  text-align: left;
  line-height: 150px;
}

.el-icon-right {
  font-size: 50px!important;
  margin: 0 150px 0 100px;
}
.event-item1 {
  position: absolute;
  top: -50px;
  left: 200px;
  height: 20px;
}

.event-item2 {
  position: absolute;
  top: 40px;
  left: 200px;
}
</style>